<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>welcome</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script>

</head>
<body>
<div class="x-nav" style="border-bottom: 0px">
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);"
       title="刷新">
        <i class="layui-icon" style="line-height:30px">&#xe9aa;</i></a>
</div>
<div class="x-body">
    <!-- 数据统计 -->
    <fieldset class="layui-elem-field layui-field-title">
        <legend>数据统计</legend>
    </fieldset>
    <!-- 销量统计展示 -->
    <div class="layui-col-md12">
        <div class="layui-carousel x-admin-carousel x-admin-backlog" lay-anim="" lay-indicator="inside" lay-arrow="none"
             style="width: 100%; height: 90px;">
            <div carousel-item="">
                <ul class="layui-row layui-col-space10 layui-this">
                    <li class="layui-col-sm4">
                        <a href="javascript:;" class="x-admin-backlog-body">
                            <h3>今日销量</h3>
                            <p>
                                <cite id="daySalesVolume">66</cite></p>
                        </a>
                    </li>
                    <li class="layui-col-sm4">
                        <a href="javascript:;" class="x-admin-backlog-body">
                            <h3>本周销量</h3>
                            <p>
                                <cite id="weekSalesVolume">12</cite></p>
                        </a>
                    </li>
                    <li class="layui-col-sm4">
                        <a href="javascript:;" class="x-admin-backlog-body">
                            <h3>本月销量</h3>
                            <p>
                                <cite id="monthSalesVolume">99</cite></p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 销售额统计展示 -->
    <div class="layui-col-md12">
        <div class="layui-carousel x-admin-carousel x-admin-backlog" lay-anim="" lay-indicator="inside" lay-arrow="none"
             style="width: 100%; height: 90px;">
            <div carousel-item="">
                <ul class="layui-row layui-col-space10 layui-this">
                    <li class="layui-col-sm4">
                        <a href="javascript:;" class="x-admin-backlog-body">
                            <h3>今日销售额</h3>
                            <p>
                                <cite>￥</cite> <cite id="daySaleroom">66</cite></p>
                        </a>
                    </li>
                    <li class="layui-col-sm4">
                        <a href="javascript:;" class="x-admin-backlog-body">
                            <h3>本周销售额</h3>
                            <p>
                                <cite>￥</cite> <cite id="weekSaleroom">12</cite></p>
                        </a>
                    </li>
                    <li class="layui-col-sm4">
                        <a href="javascript:;" class="x-admin-backlog-body">
                            <h3>本月销售额</h3>
                            <p>
                                <cite>￥</cite> <cite id="monthSaleroom">99</cite></p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 图表统计展示 -->
    <fieldset class="layui-elem-field layui-field-title">
        <legend>销售统计</legend>
    </fieldset>
    <div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md4">
                <div id="echart1" style="width: 100%;height: 300px;"></div>
            </div>
            <div class="layui-col-md4">
                <div id="echart2" style="width: 100%;height: 300px;"></div>
            </div>
            <div class="layui-col-md4">
                <div id="echart3" style="width: 100%;height: 300px;"></div>
            </div>
        </div>
    </div>
    <div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <div id="echart4" style="width: 100%;height: 300px;"></div>
            </div>
            <div class="layui-col-md6">
                <div id="echart5" style="width: 100%;height: 300px;"></div>
            </div>
        </div>
    </div>


    <!-- 系统信息 -->
    <!--<fieldset class="layui-elem-field" style="margin-top: 25px;">
        <legend>系统信息</legend>
        <div class="layui-field-box">
            <table class="layui-table">
                <tbody>
                <tr>
                    <th>xxx版本</th>
                    <td>1.0.180420</td>
                </tr>
                <tr>
                    <th>服务器地址</th>
                    <td>x.xuebingsi.com</td>
                </tr>
                <tr>
                    <th>操作系统</th>
                    <td>WINNT</td>
                </tr>
                <tr>
                    <th>运行环境</th>
                    <td>Apache/2.4.23 (Win32) OpenSSL/1.0.2j mod_fcgid/2.3.9</td>
                </tr>
                <tr>
                    <th>PHP版本</th>
                    <td>5.6.27</td>
                </tr>
                <tr>
                    <th>PHP运行方式</th>
                    <td>cgi-fcgi</td>
                </tr>
                <tr>
                    <th>MYSQL版本</th>
                    <td>5.5.53</td>
                </tr>
                <tr>
                    <th>ThinkPHP</th>
                    <td>5.0.18</td>
                </tr>
                <tr>
                    <th>上传附件限制</th>
                    <td>2M</td>
                </tr>
                <tr>
                    <th>执行时间限制</th>
                    <td>30s</td>
                </tr>
                <tr>
                    <th>剩余空间</th>
                    <td>86015.2M</td>
                </tr>
                </tbody>
            </table>
        </div>
    </fieldset>-->
    <!-- 开发团队信息 -->
    <!--<fieldset class="layui-elem-field">
        <legend>开发团队</legend>
        <div class="layui-field-box">
            <table class="layui-table">
                <tbody>
                <tr>
                    <th>版权所有</th>
                    <td>李昊
                </tr>
                <tr>
                    <th>开发者</th>
                    <td>李昊 (lihaogn@163.com)</td>
                </tr>
                </tbody>
            </table>
        </div>
    </fieldset>
-->
</div>
<script>
    var dayTopNames = [];
    var dayTopCounts = [];
    var weekTopNames = [];
    var weekTopCounts = [];
    var monthTopNames = [];
    var monthTopCounts = [];

    var weekSales = [];
    var weekDayName = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
    var weekDays = [];
    var monthSales = [];
    var monthDays = [];
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('echart1'));
    var myChart2 = echarts.init(document.getElementById('echart2'));
    var myChart3 = echarts.init(document.getElementById('echart3'));
    var myChart4 = echarts.init(document.getElementById('echart4'));
    var myChart5 = echarts.init(document.getElementById('echart5'));

    // console.log('top5-day', dayTopNames);

    // 指定图表的配置项和数据
    // 柱状图
    var bar_day = {
        title: {
            text: '今日Top8菜品'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: dayTopNames,
            axisLabel: {
                interval: 0,
                rotate: 40
            }
        },
        yAxis: {
            name:'销量（份）'
        },
        series: [{
            name: '销量',
            type: 'bar',
            data: dayTopCounts,
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            }
        }]
    };

    var bar_week = {
        title: {
            text: '本周Top8菜品'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: weekTopNames,
            axisLabel: {
                interval: 0,
                rotate: 40
            }
        },
        yAxis: {
            name:'销量（份）'
        },
        series: [{
            name: '销量',
            type: 'bar',
            data: weekTopCounts,
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            }
        }]
    };

    var bar_month = {
        title: {
            text: '本月Top8菜品'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: monthTopNames,
            axisLabel: {
                interval: 0,
                rotate: 40
            }
        },
        yAxis: {
            name:'销量（份）'
        },
        series: [{
            name: '销量',
            type: 'bar',
            data: monthTopCounts,
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            }
        }]
    };

    // 折线图
    var chart_week = {
        title: {
            text: '本周销售额统计'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: weekDays
        },
        yAxis: {
            name:'销售额（元）',
            type: 'value'
        },
        series: [{
            type: 'line',
            data: weekSales,
            areaStyle: {},
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            }
        }]
    };

    var chart_month = {
        title: {
            text: '本月销售额统计'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: monthDays
        },
        yAxis: {
            name:'销售额（元）',
            type: 'value'
        },
        series: [{
            type: 'line',
            data: monthSales,
            areaStyle: {},
            label: {
                normal: {
                    show: true,
                    position: 'top'

                }
            }
        }]
    };

    var option3 = {
        title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [{
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [{
                value: 335,
                name: '直接访问'
            },
                {
                    value: 310,
                    name: '邮件营销'
                },
                {
                    value: 234,
                    name: '联盟广告'
                },
                {
                    value: 135,
                    name: '视频广告'
                },
                {
                    value: 1548,
                    name: '搜索引擎'
                }
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };


</script>
<script>
    $(document).ready(function () {
        $.ajax({
            url: '/sell/getData',
            async: false,
            success: function (res) {
                console.log(res);

                $('#daySalesVolume').html(res.daySaleroom.salesVolume);
                $('#daySaleroom').html(res.daySaleroom.saleroom.toFixed(2));

                $('#weekSalesVolume').html(res.weekSaleroom.salesVolume);
                $('#weekSaleroom').html(res.weekSaleroom.saleroom.toFixed(2));

                $('#monthSalesVolume').html(res.monthSaleroom.salesVolume);
                $('#monthSaleroom').html(res.monthSaleroom.saleroom.toFixed(2));

                for (var i in res.dayTops) {
                    // console.log(res.dayTops[i].foodName);
                    dayTopNames.push(res.dayTops[i].foodName);
                    dayTopCounts.push(res.dayTops[i].foodSalesVolume);
                }

                for (var i in res.weekTops) {
                    weekTopNames.push(res.weekTops[i].foodName);
                    weekTopCounts.push(res.weekTops[i].foodSalesVolume);
                }
                for (var i in res.monthTops) {
                    monthTopNames.push(res.monthTops[i].foodName);
                    monthTopCounts.push(res.monthTops[i].foodSalesVolume);
                }

                var j = 0;
                for (var i in res.weekSaleGraph) {
                    while (res.weekSaleGraph[i].xday !== j && j <= 6) {
                        weekSales.push(0.00);
                        weekDays.push(weekDayName[j]);
                        j++;
                    }
                    weekSales.push(res.weekSaleGraph[i].saleroom);
                    weekDays.push(weekDayName[j]);
                    j++;
                }
                console.log(weekSales);


                j = 1;
                for (var i in res.monthSaleGraph) {
                    while (res.monthSaleGraph[i].xday !== j && j <= 31) {
                        monthSales.push(0.00);
                        j++;
                    }
                    j++;
                    monthSales.push(res.monthSaleGraph[i].saleroom);
                }

                for (var i = 0; i < monthSales.length; i++) {
                    monthDays.push(i + 1);
                }

                // console.log(monthSales);


                // 使用刚指定的配置项和数据显示图表。
                myChart1.setOption(bar_day);
                myChart2.setOption(bar_week);
                myChart3.setOption(bar_month);
                myChart4.setOption(chart_week);
                myChart5.setOption(chart_month);
            }
        })
    })
</script>

</body>
</html>
